{% set product = hookable_metadata.context.resource %}

<div class="bg-white mb-3">
<div class="accordion" id="media" >
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#media-body" aria-expanded="false" aria-controls="media" >
                    {{ 'sylius.ui.media'|trans }}
                    <span class="accordion-button-toggle">
                    {{ ux_icon('tabler:chevron-down') }}
                </span>
                </button>
            </h2>
            <div id="media-body" class="accordion-collapse collapse" data-bs-parent="#media">
                <div class="accordion-body">
                    {% if product.images|length >= 1 %}
                        <div class="spotlight-group" {{ sylius_test_html_attribute('media') }}>
                            {% for image in product.images %}
                                {% set path = image.path is not null ? image.path|imagine_filter('sylius_admin_product_thumbnail') : asset('bundles/syliusui/images/200x200.png') %}
                                    {% if product.isConfigurable() and product.variants|length > 0 %}
                                        {% if product.getVariantSelectionMethod() == 'match' %}
                                            {% for variant in image.productVariants %}
                                                <div data-variant-options="{% for option in variant.optionValues %}{{ option.code }} {% endfor %}"></div>
                                            {% endfor %}
                                        {% else %}
                                            {% for variant in image.productVariants %}
                                                <div data-variant-code="{{ variant.code }}"></div>
                                            {% endfor %}
                                        {% endif %}
                                    {% endif %}
                                    <a href="{{ image.path|imagine_filter('sylius_admin_product_original') }}" class="spotlight">
                                        <img src="{{ path }}" alt="{{ product.name }}" />
                                    </a>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ 'sylius.ui.there_are_no_images_for_this_product'|trans }}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
